~inc:header.inc~
<div id="content">

<div id="status">
	<div id="loading" style="display:none">Error:<br />Connection to demo board was lost.</div>
	<div id="display">
		<span style="float:right;font-size:9px;font-weight:normal;padding-top:8px;text-indent:0px">(click to toggle)</span>
		<p>LEDs:<br /><span class="leds">
		<a id="led7" onClick="newAJAXCommand('leds.cgi?led=7');">&bull;</a>
		<a id="led6" onClick="newAJAXCommand('leds.cgi?led=6');">&bull;</a>
		<a id="led5" onClick="newAJAXCommand('leds.cgi?led=5');">&bull;</a>
		<a id="led4" onClick="newAJAXCommand('leds.cgi?led=4');">&bull;</a>
		<a id="led3" onClick="newAJAXCommand('leds.cgi?led=3');">&bull;</a>
		<a id="led2" onClick="newAJAXCommand('leds.cgi?led=2');">&bull;</a>
		<a id="led1" onClick="newAJAXCommand('leds.cgi?led=1');">&bull;</a>
		<a id="led0">&bull;</a>
		</span></p>
		<p>Buttons:<br />
		<span id="btn3">?</span> &nbsp; 
		<span id="btn2">?</span> &nbsp; 
		<span id="btn1">?</span> &nbsp; 
		<span id="btn0">?</span></p>
		<p>Potentiometer: <span id="pot0" style="font-weight:normal">?</span>
	</div>
</div>

<h1>Welcome!</h1>

<p><table style="padding-left: 10px;">
<tr><td><b>Stack Version:</b></td><td>&nbsp;</td><td>~version~</td></tr>
<tr><td><b>Build Date:</b></td><td>&nbsp;</td><td>~builddate~</td></tr>
</table></p>

<p>This site demonstrates the power, flexibility, and scalability of an 8, 16, or 32-bit embedded
web server.  Everything you see is powered by a Microchip PIC microcontroller 
running the Microchip TCP/IP Stack.</p>

<p>On the right you'll see the current status of the demo board.  For a quick 
example, click the LEDs to toggle the lights on the board.  Press the push 
buttons or turn the potentiometer and you'll see the status update immediately.  
This examples uses AJAX techniques to provide real-time feedback.</p>

<p>This site is provided as a tutorial for the various features of the HTTP
web server, including:</p>

<ul>
<li><b>Dynamic Variable Substitution</b> - display real-time data</li>
<li><b>Form Processing</b> - handle input from the client</li>
<li><b>Authentication</b> - require a user name and password</li>
<li><b>Cookies</b> - store session state information for richer applications</li>
<li><b>File Uploads</b> - parse files for configuration settings and more</li>
<li><b>GZIP Compression</b> - smaller storage and faster transmission</li>
</ul>

<p>For more information on the Microchip TCP/IP Stack, please refer to 
application note AN833 available at 
<a href="http://www.microchip.com">www.microchip.com</a>.</p>

</div>

<script type="text/javascript">
/**
 * Parses the xmlResponse from status.xml and updates the status box
 */
function updateStatus(xmlData) {
	
	// Check if a timeout occurred
	if(!xmlData)
	{
		document.getElementById('display').style.display = 'none';
		document.getElementById('loading').style.display = 'inline';
		return;
	}

	// Make sure we're displaying the status display
	document.getElementById('loading').style.display = 'none';
	document.getElementById('display').style.display = 'inline';
	
	// Loop over all the LEDs
	for(i = 0; i < 8; i++) {
		if(getXMLValue(xmlData, 'led'+i) == '1')
			document.getElementById('led' + i).style.color = '#090';
		else
			document.getElementById('led' + i).style.color = '#ddd';
	}
	
	// Loop over all the buttons
	for(i = 0; i < 4; i++) {
		if(getXMLValue(xmlData, 'btn'+i) == 'up')
			document.getElementById('btn' + i).innerHTML = '&Lambda;';
		else
			document.getElementById('btn' + i).innerHTML = 'V';
	}
	
	//update the POT value
	document.getElementById('pot0').innerHTML = getXMLValue(xmlData, 'pot0');
		
}

setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
</script>

<script type="text/javascript">
document.getElementById('hello').innerHTML = "~hellomsg~";
</script>

~inc:footer.inc~
